<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Header/>
            </el-header>
            <el-main>
                <div class="main-container">
                    <Slider/>
                    <Intro :url="expertIntro.url" :placeholder="expertIntro.placeholder" :total="expert?.length || 0" :item="expert">
                        <template v-slot:title>{{ expertIntro.title }}</template>
                        <template v-slot:ps>{{ expertIntro.ps }}</template>
                    </Intro>
                    <Intro :url="departmentIntro.url" :placeholder="departmentIntro.placeholder" :total="department?.length" :item="department">
                        <template v-slot:title>{{ departmentIntro.title }}</template>
                        <template v-slot:ps>{{ departmentIntro.ps }}</template>
                    </Intro>
                </div>
            </el-main>
            <el-footer>
                <Footer/>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import Slider from './components/Main/components/Slider.vue';
import Intro from './components/Main/components/Intro.vue';
import { getDoctor } from '@/api/getInfo';
import { onMounted, reactive, ref } from 'vue';
    defineOptions({
        name:'Home'
    })
    const expertIntro = reactive(
        {title:'专家介绍',ps:'Expert Introduction',url:require('@/assets/svg/intro_svg/doctor.svg'),placeholder:'请输入医生姓名'}
    )
    const departmentIntro = reactive(
        {title:'重点科室',ps:'Kye Department',url:require('@/assets/svg/intro_svg/department.svg'),placeholder:'请输入科室名称'}
    )
    // 专家信息
    let expert = ref([])
    async function getExpert() {
        const data = {
            position:["专家",'副院长','院长','主任医生']
        }
        try {
            const response = await (await getDoctor(data)).data
            expert.value = response
        }catch {

        }
    }
    onMounted(()=>{
        getExpert()
    })
    
    // 科室信息
    const department = reactive([
        {url:require('@/assets/svg/department_svg/口腔科.svg'),name:'口腔科'},
        {url:require('@/assets/svg/department_svg/妇科.svg'),name:'妇科'},
        {url:require('@/assets/svg/department_svg/外科.svg'),name:'外科'}
    ])
</script>

<style lang="scss" scoped>
    * {
        padding: 0;
    }
    .common-layout {

        .el-container {

            .el-header {
                height: auto;
            }
            .el-main {
                margin-top: 10px;
                height: auto;
                overflow: hidden;
                display: flex;
                justify-content: center;

                .main-container {
                    width: 980px;
                }
            }
        }
    }
</style>